<template>
  <!-- 弹框 -->
  <el-dialog
    :visible="dialogVisible"
    width="680px"
    :title="addForm.id ? '编辑规则' : '添加规则'"
    :close-on-click-modal="false"
    @close="closeFeeRule"
  >
    <!-- 表单接口 -->
    <div class="form-container">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="top">
        <el-form-item label="计费规则编号" prop="ruleNumber">
          <el-input v-model="addForm.ruleNumber" />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName">
          <el-input v-model="addForm.ruleName" />
        </el-form-item>
        <el-form-item label="计费方式" prop="chargeType">
          <el-radio-group v-model="addForm.chargeType" size="small">
            <el-radio label="duration" border>时长收费</el-radio>
            <el-radio label="turn" border>按次收费</el-radio>
            <el-radio label="partition" border>分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="flex-container" style="display: flex; justify-content: space-between">
          <el-form-item label="免费时长">
            <el-input v-model="addForm.freeDuration" type="number" min="0" class="rule-input">
              <template #append>小时</template>
            </el-input>
          </el-form-item>
          <el-form-item label="收费上限">
            <el-input v-model="addForm.chargeCeiling" type="number" min="0" class="rule-input">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </div>
        <!-- el-form-item 可以继续嵌套 el-form-item -->
        <el-form-item label="计费规则" prop="chargeType" required>
          <!-- 按时长收费区域 -->
          <div v-if="addForm.chargeType === 'duration'" class="charge-rule duration">
            <span class="rule-label">每</span>
            <el-form-item prop="durationTime">
              <el-input
                v-model="addForm.durationTime"
                class="rule-input"
                placeholder="小时数"
                type="number"
                min="0"
              >
                <template #append>小时</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="durationPrice">
              <el-input
                v-model="addForm.durationPrice"
                class="rule-input"
                placeholder="请输入金额"
                type="number"
                min="0"
              >
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </div>
          <!-- 按次收费区域 -->
          <div v-if="addForm.chargeType === 'turn'" class="charge-rule turn">
            <span class="rule-label">每次收费</span>
            <el-form-item prop="turnPrice">
              <el-input
                v-model="addForm.turnPrice"
                class="rule-input"
                placeholder="请输入金额"
                type="number"
                min="0"
              >
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </div>
          <!-- 按分段收费区域 -->
          <div v-if="addForm.chargeType === 'partition'" class="charge-rule partition">
            <div class="rule-section">
              <span class="rule-label">前</span>
              <el-form-item prop="partitionFrameTime">
                <el-input
                  v-model="addForm.partitionFrameTime"
                  class="rule-input"
                  placeholder="小时数"
                  type="number"
                  min="0"
                >
                  <template #append>小时</template>
                </el-input>
              </el-form-item>

              <span class="rule-label">内，每小时</span>
              <el-form-item prop="partitionFramePrice">
                <el-input
                  v-model="addForm.partitionFramePrice"
                  class="rule-input"
                  placeholder="金额"
                  type="number"
                  min="0"
                >
                  <template #append>元</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="rule-section">
              <span class="rule-label">超出部分每</span>
              <el-form-item prop="partitionIncreaseTime">
                <el-input
                  v-model="addForm.partitionIncreaseTime"
                  class="rule-input"
                  placeholder="小时数"
                  type="number"
                  min="0"
                >
                  <template #append>小时</template>
                </el-input>
              </el-form-item>

              <span class="rule-label">加收</span>
              <el-form-item prop="partitionIncreasePrice">
                <el-input
                  v-model="addForm.partitionIncreasePrice"
                  class="rule-input"
                  placeholder="金额"
                  type="number"
                  min="0"
                >
                  <template #append>元</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="closeFeeRule">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addFeeRuleAPI, getRuleAPI, editRuleAPI } from "@/api/carrule";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      addForm: {
        ruleNumber: "", // 计费规则编号
        ruleName: "", // 计费规则名称
        chargeType: "duration", // 计费规则类型 duration / turn / partition
        chargeCeiling: null, // 时长上限
        freeDuration: null, // 免费时长
        // 时长计费独有字段
        durationPrice: null, // 时长计费单位价格
        durationTime: null,
        durationType: "hour",
        // 按次收费独有字段
        turnPrice: null,
        // 分段计费独有字段
        partitionFrameTime: null, // 段内时间
        partitionFramePrice: null, // 段内费用
        partitionIncreaseTime: null, // 超出时间
        partitionIncreasePrice: null, // 超出费为收费价钱
      }, // 计费规则表单对象
      addFormRules: {
        ruleNumber: [{ required: true, message: "请输入规则编号", trigger: "blur" }],
        ruleName: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
        chargeType: [{ required: true, message: "请选择收费类型", trigger: "blur" }],
        durationTime: [{ required: true, message: "请输入时间", trigger: "blur" }],
        durationPrice: [{ required: true, message: "请输入金额", trigger: "blur" }],
        turnPrice: [{ required: true, message: "请输入次数", trigger: "blur" }],
        partitionFrameTime: [{ required: true, message: "请输入段内时间", trigger: "blur" }],
        partitionFramePrice: [{ required: true, message: "请输入段内费用", trigger: "blur" }],
        partitionIncreaseTime: [{ required: true, message: "请输入超出时间", trigger: "blur" }],
        partitionIncreasePrice: [{ required: true, message: "请输入超出金额", trigger: "blur" }],
      }, // 计费规则校验规则对象
    };
  },
  watch: {
    // 监听计费类型变化，清空表单验证
    "addForm.chargeType"(val) {
      this.$refs.addForm.clearValidate([
        "turnPrice",
        "durationPrice",
        "durationTime",
        "partitionFrameTime",
        "partitionFramePrice",
        "partitionIncreaseTime",
        "partitionIncreasePrice",
      ]);
    },
  },
  methods: {
    // 回显计费规则(父组件调用)
    async getRule(id) {
      this.addForm = (await getRuleAPI(id)).data;
    },
    // 提交新规则表单
    confirmAdd() {
      this.$refs.addForm.validate(async (flag) => {
        if (!flag) return;
        if (this.addForm.id) {
          await editRuleAPI(this.addForm);
        } else {
          await addFeeRuleAPI(this.addForm);
        }
        this.$message.success(`${this.addForm.id ? "编辑成功" : "添加成功"}`);
        // 子组件调用父组件中的方法
        // 1.this.$parent  父组件实例
        // this.$parent.getRuleList();
        // 2.this.$emit('getList')  传递自定义事件
        this.$emit("getList");
        this.closeFeeRule();
      });
    },
    // 关闭添加计费规则
    closeFeeRule() {
      // 子组件不能修改父组件传过来的数据（谁的数据谁负责）
      // 1.子传父
      // 2.this.$parent.dialogVisible=false
      // 3. .sync 子组件和父组件中的数据双向绑定（父组件放权，允许子组件修改数据）
      this.$emit("update:dialogVisible", false);
      this.addForm = {
        ruleNumber: "", // 计费规则编号
        ruleName: "", // 计费规则名称
        chargeType: "duration", // 计费规则类型 duration / turn / partition
        chargeCeiling: null, // 时长上限
        freeDuration: null, // 免费时长
        // 时长计费独有字段
        durationPrice: null, // 时长计费单位价格
        durationTime: null,
        durationType: "hour",
        // 按次收费独有字段
        turnPrice: null,
        // 分段计费独有字段
        partitionFrameTime: null, // 段内时间
        partitionFramePrice: null, // 段内费用
        partitionIncreaseTime: null, // 超出时间
        partitionIncreasePrice: null, // 超出费为收费价钱
      };
      this.$refs.addForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.charge-rule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rule-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.rule-label {
  white-space: nowrap;
}
.rule-input {
  width: 180px;
}
.form-container {
  padding: 0px 70px;
}
</style>
